import { type FC } from 'react';
import { Text, TouchableHighlight, ActivityIndicator } from 'react-native';
import Space from '../../../Space';
import { primaryColor } from '@/constants/Colors';
import type { ButtonProps } from '../../types';
import { btnStyles } from './styles';

const Button: FC<ButtonProps> = (props) => {
  const { 
    title, 
    type = 'default', 
    loading = false,
    disabled = false
  } = props;

  const textStyles = [
    btnStyles.buttonText,
    btnStyles[type],
    disabled && btnStyles.disabledText
  ];

  const buttonStyles = [
    btnStyles.button,
    disabled && btnStyles.disabled
  ];

  return (
    <TouchableHighlight
      activeOpacity={.85}
      style={buttonStyles}
      onPress={props.onPress}
      underlayColor="#f6f6f6"
      disabled={loading || disabled}
    >
      <Space size={10} style={btnStyles.inner}>
        {loading && <ActivityIndicator color={primaryColor}/>}
        <Text style={textStyles}>{title}</Text>
      </Space>
    </TouchableHighlight>
  );
}

export default Button;